<template>
    <div>
        <!-- 按钮 -->
        <el-button style="margin:10px" type="primary" icon="el-icon-refresh-right" circle
            @click="getAllPageShopList"></el-button>
        <!-- <el-button style="margin:10px" @click="allPassPassDynamic">一键审核</el-button> -->
        <!-- <el-input placeholder="请输入店鋪昵称在点击搜索" v-model="searchText" style="width:300px;background-color: #fff;">
            <el-button slot="append" icon="el-icon-search" @click="filterateAllPageShopList"></el-button>
        </el-input> -->
        <el-button style="margin:10px" @click="reSetting">重置</el-button>
        <!-- 表格
        data 展示数据 —— 数组类型
      -->
        <el-table style="width: 100%;" border :data="golist" @selection-change="handleSelectionChange">

            <el-table-column type="selection" width="55" align="center">

            </el-table-column>
            <el-table-column prop="id" label="id" width="100" align="center">
            </el-table-column>
            <el-table-column label="商家LOGO" align="center">
                <template slot-scope="{ row, $index }">
                    <el-image style="width: 40px; height: 40px; margin-right: 5px;" :src="$staticURL + row.avatar"
                        v-if="row.avatar" :preview-src-list="[$staticURL + row.avatar]">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="商家名称" width="100" align="center">
            </el-table-column>
            <el-table-column prop="createUserName" label="创建人姓名" width="100" align="center">
            </el-table-column>
            <el-table-column prop="idCard" label="身份证号" width="100" align="center">
            </el-table-column>
            <el-table-column prop="address" label="地址" align="center">
            </el-table-column>
            <el-table-column prop="contactsPhone" label="联系电话" align="center">
            </el-table-column>
            <el-table-column prop="intro" label="简介" align="center">
            </el-table-column>
            <el-table-column label="营业执照" align="center">
                <template slot-scope="{ row, $index }">
                    <el-image style="width: 40px; height: 40px; margin-right: 5px;"
                        :src="$staticURL + row.businessLicensePic" v-if="row.businessLicensePic"
                        :preview-src-list="[$staticURL + row.businessLicensePic]">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column label="门面照片" align="center">
                <template slot-scope="{ row, $index }">
                    <el-image style="width: 40px; height: 40px; margin-right: 5px;" :src="$staticURL + row.facadePic"
                        v-if="row.facadePic" :preview-src-list="[$staticURL + row.facadePic]">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column label="经营许可证照片" align="center">
                <template slot-scope="{ row, $index }">
                    <el-image style="width: 40px; height: 40px; margin-right: 5px;"
                        :src="$staticURL + row.foodOperationLicense" v-if="row.foodOperationLicense"
                        :preview-src-list="[$staticURL + row.foodOperationLicense]">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column label="商标证书" align="center">
                <template slot-scope="{ row, $index }">
                    <el-image style="width: 40px; height: 40px; margin-right: 5px;"
                        :src="$staticURL + row.healthCertificate" v-if="row.healthCertificate"
                        :preview-src-list="[$staticURL + row.healthCertificate]">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column label="其他资质证明图片" align="center">
                <template slot-scope="{ row, $index }">
                    <el-image style="width: 40px; height: 40px; margin-right: 5px;" :src="$staticURL + row.otherPic"
                        v-if="row.otherPic" :preview-src-list="[$staticURL + row.otherPic]">
                    </el-image>
                </template>
            </el-table-column>

            <el-table-column prop="createTime" label="上传时间" align="center" width="100">
            </el-table-column>
            <el-table-column prop="realityDeposit" label="押金" align="center" width="100">
            </el-table-column>
            <!-- <el-table-column label="审核结果" align="center" width="100"
                :filters="[{ text: '审核驳回', value: '-1' }, { text: '未审核', value: '0' }, { text: '审核通过', value: '1' }]"
                :filter-method="filterTag" filter-placement="bottom-end">
                <template slot-scope="{ row, $index }">
                    <p v-if="row.status == -1">审核驳回</p>
                    <p v-else-if="row.status == 0">未审核</p>
                    <p v-else>审核通过</p>
                </template>
            </el-table-column> -->
            <el-table-column label="驳回原因" align="center">
                <template slot-scope="{ row, $index }">
                    <p v-if="row.status == -1">{{ row.auditResult }}</p>
                </template>
            </el-table-column>
            <!--     <el-table-column label="下架原因" align="center">
          <template slot-scope="{ row, $index }">
            {{ row.auditResult }}
          </template>
        </el-table-column> -->
            <el-table-column label="操作" width="200" align="center">
                <template slot-scope="{ row, $index }">
                    <template v-if="row.status == 1">
                        <!-- <el-button type="primary" icon="el-icon-edit" circle></el-button> -->
                        <el-popconfirm title="封店？" icon="el-icon-info" icon-color="red"
                            @confirm="handleShop(row.id, 1)">
                            <el-tooltip content="封店" placement="top" slot="reference">
                                <el-button type="danger" icon="el-icon-delete-solid"></el-button>
                            </el-tooltip>
                        </el-popconfirm>
                        <el-popconfirm v-if="row.realityDeposit" style="margin-left:10px" title="扣押金？"
                            icon="el-icon-info" icon-color="red" @confirm="getRejectDynamic(row.id, 2)">
                            <el-tooltip content="扣押金" placement="top" slot="reference">
                                <el-button type="warning" icon="el-icon-warning"></el-button>
                            </el-tooltip>
                        </el-popconfirm>
                    </template>
                    <!-- <template v-if="row.status == 1">
  
            </template> -->
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination style="margin-top:20px;text-align:center" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page="pageNumber" :page-sizes="[10, 50, 100]"
            :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
</template>

<script>
import {
    MessageBox,
    Message
} from 'element-ui'
export default {
    name: 'shoplist',
    mounted() {
        //获取列表数据方法
        this.getAllPageShopList()
    },
    data() {
        return {
            //页码
            pageNumber: 1,
            //每页数量
            pageSize: 10,
            //总条数
            total: 0,
            //列表数据
            golist: [],
            ids: [],
            // ids:[],
            //搜索
            searchText: '',
        }
    },
    methods: {
        // async allPassPassDynamic() {
        //   if (this.ids == '') {
        //     Message({
        //       message: '请选择商家',
        //       type: 'error',
        //       duration: 5 * 1000
        //     })
        //     return false;
        //   }
        //   let res = await this.$API.shop.passShop({
        //     id: this.ids,
        //     auditResult: '审核通过'
        //   })
        //   this.getAllPageShopList()
        // },
        filterateAllPageShopList() {
            // console.log(this.searchText, 'evvvvvvv');
            let list
            if (this.searchText != null) {
                list = this.golist.filter(item => { return item.name.includes(this.searchText) }
                );
            }
            if (list.length == 0) {
                this.$message('请输入有效昵称');
            }
            this.golist = list
            // console.log(list, '过滤出');
        },
        handleSelectionChange(val) {
            console.log(val)
            this.ids = val.filter(function (item) {
                return item.auditStatus == 0
            }).map((item, index) => {
                return item.id;
            }).join(",");
            console.log(this.ids)
        },
        async getAllPageShopList() {
            this.golist = []
            let res = await this.$API.shop.pageShopList({
                pageNumber: this.pageNumber,
                pageSize: this.pageSize,
                searchText: this.searchText
            })
            this.total = res.data.sumLine;
            this.list = res.data.rows;
            this.list.forEach(element => {

                if (element.status == 1) {
                    this.golist.push(element)

                }
            });
            console.log(this.list, 'list');
            console.log(this.golist, 'golist');
        },
        reSetting() {
            this.searchText = '';
            this.getAllPageShopList();
        },
        async handleShop(id, size) {
            let auditResult = prompt('原因：');
            let res = await this.$API.shop.handleShop({
                shopId: id,
                type: size,
                reason: auditResult
            })
            this.getAllPageShopList()
            console.log(res, 'resOOOOOOOOO');
        },
        // 扣押金
        async getRejectDynamic(id, onsize) {
            let auditResult = prompt('原因：');


            if (auditResult != null && auditResult != "") {
                let size = prompt('扣除多少：');
                if (size) {
                    let res = await this.$API.shop.handleShop({
                        amount: Number(size),
                        shopId: id,
                        reason: auditResult,     //原因
                        type: onsize      //类别
                    })
                }
                this.$message('修改成功')
                // console.log(res1, '大哟哟哟哟哟哟');
                // if()
                this.getAllPageShopList()
            }
        },

        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.pageSize = val
            this.getAllPageShopList()
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.pageNumber = val
            this.getAllPageShopList()
        },
        filterTag(value, row) {
            console.log(value, row, '打印信息')
            return row.status == value;
        },
        filterHandler(value, row, column) {
            // const property = column['property'];
            // return row[property] === value;
        }
    }
}
</script>

<style></style>